<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     canvas{
        background-color: black;
     }
     body {
        margin: 0px;
     }
    </style>
</head>
<body>
<canvas></canvas> 
<script>
    var canvas = document.querySelector('canvas')
    var ctx = canvas.getContext('2d')
    canvas.height=window.innerHeight;
    canvas.width = window.innerWidth;
    
    function Circle(x,y) {
        this.x = x
        this.y = y
        this.r =Math.random()*7+8
        this.xChange = Math.random() >0.5 ? Math.random()*4:-(Math.random()*4)
        this.yChange = Math.random() >0.5 ? Math.random()*4:-(Math.random()*4)
        this.rChange =0.96
        this.color = randomColor()
    }
    function randomColor(){
        var red =Math.floor( Math.random()*256)
        var green = Math.floor( Math.random()*256)
        var blue =Math.floor( Math.random()*256)
        return 'rgb('+red+','+green+','+blue+')'
    }
var arr =[]
document.body.addEventListener( 'click',function(e) {
    for (var i =0;i<100;i++){
        arr.push(new Circle(e.clientX,e.clientY))
    }
} )
//定时器
setInterval(function(){
    ctx.clearRect(0,0,window.innerWidth,window.innerHeight)//x y width height
    arr.forEach(function(item,index) {
        ctx.beginPath()
        ctx.fillStyle=item.color
        ctx.arc(item.x,item.y,item.r,0,Math.PI*2)
        ctx.fill()
        ctx.closePath()
        item.x +=item.xChange;
        item.y +=item.yChange;
        item.r *=item.rChange;
        
    }
)
},1000/120)
//每隔1s->遍历100个对象-》每一个对象又进行了绘画-》每一个对象又进行了 x y 的更改

</script>
</body>
</html>